<template>
  <div class="otherHome">
    <Other-Header index="2" bgColor="#5741d9" @changelang="changeLanguage"></Other-Header>
    <div class="informationBox">
      <!-- content -->
      <div data-v-429bb47c="" class="main">
      	<div data-v-429bb47c="" class="ivu-tabs ivu-tabs-no-animation" style="width: 100%;">
      		<div class="ivu-tabs-bar">
      			<!---->
      			<div tabindex="0" class="ivu-tabs-nav-container">
      				<div class="ivu-tabs-nav-wrap" style="position: relative;"><span class="ivu-tabs-nav-prev ivu-tabs-nav-scroll-disabled"><i
      						 class="ivu-icon ivu-icon-ios-arrow-back"></i></span> <span class="ivu-tabs-nav-next ivu-tabs-nav-scroll-disabled"><i
      						 class="ivu-icon ivu-icon-ios-arrow-forward"></i></span>
      					<div class="ivu-tabs-nav-scroll">
      						<div class="ivu-tabs-nav">
      							<div class="ivu-tabs-ink-bar" style="visibility: visible; width: 47px; left: 0px;"></div>
      							<div class="ivu-tabs-tab ivu-tabs-tab-active ivu-tabs-tab-focused">
      								<!----> All
      								<!---->
      							</div>
      							<div class="ivu-tabs-tab">
      								<!----> Coming
      								<!---->
      							</div>
      							<div class="ivu-tabs-tab">
      								<!----> Ongoing
      								<!---->
      							</div>
      							<div class="ivu-tabs-tab">
      								<!----> Distributing
      								<!---->
      							</div>
      							<div class="ivu-tabs-tab">
      								<!----> Completed
      								<!---->
      							</div>
      						</div>
      					</div><object tabindex="-1" type="text/html" data="about:blank" style="display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: none; padding: 0px; margin: 0px; opacity: 0; z-index: -1000; pointer-events: none;"></object>
      				</div>
      			</div>
      		</div>
      		<div class="ivu-tabs-content" style="transform: translateX(0%) translateZ(0px);">
      			<div data-v-429bb47c="" class="ivu-tabs-tabpane" style="visibility: visible;">
      				<div data-v-429bb47c="" class="activity-container">
      					<!---->
      					<!---->
      					<div data-v-429bb47c="" class="activity-item">
      						<div data-v-429bb47c="" class="ivu-row">
      							<div data-v-429bb47c="" class="ivu-col ivu-col-span-xs-24 ivu-col-span-sm-24 ivu-col-span-md-4 ivu-col-span-lg-4"><img
      								 data-v-429bb47c="" src="http://image.qtglobal.net/activity/genelog.jpg"></div>
      							<div data-v-429bb47c="" class="ivu-col ivu-col-span-xs-24 ivu-col-span-sm-24 ivu-col-span-md-20 ivu-col-span-lg-20">
      								<div data-v-429bb47c="" class="title"><span data-v-429bb47c="">GENE</span>
      									<!---->
      									<div data-v-429bb47c="" class="step1">Ongoing</div>
      									<!---->
      									<!---->
      								</div>
      								<div data-v-429bb47c="" style="width: 100%; padding-top: 10px;">
      									<div data-v-429bb47c="" class="ivu-row">
      										<div data-v-429bb47c="" class="ivu-col ivu-col-span-xs-24 ivu-col-span-sm-24 ivu-col-span-md-10 ivu-col-span-lg-10">
      											<div data-v-429bb47c="" class="progress-text" style="margin-bottom: -3px;"><span data-v-429bb47c=""
      												 class="gray">Total Supply :<span data-v-429bb47c="">1000000000.00 NQT</span></span></div>
      											<div data-v-429bb47c="" class="progress-text"><span data-v-429bb47c=""><br data-v-429bb47c="">Activity
      													Type :
      													<!---->
      													<!---->
      													<!----> <span data-v-429bb47c="">Institutional subscription</span></span></div>
      										</div>
      										<div data-v-429bb47c="" class="ivu-col ivu-col-span-xs-24 ivu-col-span-sm-24 ivu-col-span-md-14 ivu-col-span-lg-14">
      											<p data-v-429bb47c="" class="progress-time">Start Date：2021-05-09 00:00:00</p>
      											<p data-v-429bb47c="" class="progress-time">End Date：2021-08-09 00:00:00</p>
      										</div>
      									</div>
      									<div data-v-429bb47c="" class="bottom-panel ivu-row">
      										<div data-v-429bb47c="" class="ivu-col ivu-col-span-24">
      											<div data-v-429bb47c="" class="bottom"><span data-v-429bb47c=""><i data-v-429bb47c="" class="ivu-icon ivu-icon-md-information-circle"></i>
      													GENE Initial Coin Offering</span> <a data-v-429bb47c="" href="#/detail/14538" target="_blank"
      												 class="ivu-btn ivu-btn-warning">
      													<!---->
      													<!----> <span>Detail</span></a></div>
      											<div data-v-429bb47c="" class="bottom-mobile">
      												<p data-v-429bb47c=""><span data-v-429bb47c=""><i data-v-429bb47c="" class="ivu-icon ivu-icon-md-information-circle"></i>
      														GENE Initial Coin Offering</span></p> <a data-v-429bb47c="" href="#/detail/14538" target="_self"
      												 class="ivu-btn ivu-btn-warning ivu-btn-long">
      													<!---->
      													<!----> <span>Detail</span></a>
      											</div>
      										</div>
      									</div>
      								</div>
      							</div>
      						</div>
      					</div>
      				</div>
      				<div data-v-429bb47c="" class="page">
      					<ul data-v-429bb47c="" class="ivu-page">
      						<!---->
      						<li title="上一页" class="ivu-page-prev ivu-page-disabled"><a><i class="ivu-icon ivu-icon-ios-arrow-back"></i></a></li>
      						<li title="1" class="ivu-page-item ivu-page-item-active"><a>1</a></li>
      						<!---->
      						<!---->
      						<!---->
      						<!---->
      						<!---->
      						<!---->
      						<!---->
      						<!---->
      						<!---->
      						<!---->
      						<li title="下一页" class="ivu-page-next ivu-page-disabled"><a><i class="ivu-icon ivu-icon-ios-arrow-forward"></i></a></li>
      						<!---->
      					</ul>
      				</div>
      			</div>
      			<div data-v-429bb47c="" class="ivu-tabs-tabpane" style="visibility: hidden; display: none;">
      				<div data-v-429bb47c="" class="activity-container">
      					<!---->
      					<div data-v-429bb47c="" class="tips-line">
      						<div data-v-429bb47c="" class="ivu-spin ivu-spin-large">
      							<div class="ivu-spin-main"><span class="ivu-spin-dot"></span>
      								<div class="ivu-spin-text"></div>
      							</div>
      						</div>
      					</div>
      				</div>
      				<!---->
      			</div>
      			<div data-v-429bb47c="" class="ivu-tabs-tabpane" style="visibility: hidden; display: none;">
      				<div data-v-429bb47c="" class="activity-container">
      					<!---->
      					<div data-v-429bb47c="" class="tips-line">
      						<div data-v-429bb47c="" class="ivu-spin ivu-spin-large">
      							<div class="ivu-spin-main"><span class="ivu-spin-dot"></span>
      								<div class="ivu-spin-text"></div>
      							</div>
      						</div>
      					</div>
      				</div>
      				<!---->
      			</div>
      			<div data-v-429bb47c="" class="ivu-tabs-tabpane" style="visibility: hidden; display: none;">
      				<div data-v-429bb47c="" class="activity-container">
      					<!---->
      					<div data-v-429bb47c="" class="tips-line">
      						<div data-v-429bb47c="" class="ivu-spin ivu-spin-large">
      							<div class="ivu-spin-main"><span class="ivu-spin-dot"></span>
      								<div class="ivu-spin-text"></div>
      							</div>
      						</div>
      					</div>
      				</div>
      				<!---->
      			</div>
      			<div data-v-429bb47c="" class="ivu-tabs-tabpane" style="visibility: hidden; display: none;">
      				<div data-v-429bb47c="" class="activity-container">
      					<!---->
      					<div data-v-429bb47c="" class="tips-line">
      						<div data-v-429bb47c="" class="ivu-spin ivu-spin-large">
      							<div class="ivu-spin-main"><span class="ivu-spin-dot"></span>
      								<div class="ivu-spin-text"></div>
      							</div>
      						</div>
      					</div>
      				</div>
      				<!---->
      			</div>
      		</div>
      	</div>
      </div>
      <!-- content -->
    </div>
    <Footer></Footer>
  </div>
</template>

<style lang="less" scoped>
.otherHome {
  padding-top: 100px;
  background-color: #f7f8fc;
  position: absolute;
  top: 0;
  min-height: 100%;
  width: 100%;
}
.informationBox {
  width: 1200px;
  box-sizing: border-box;
  margin: 20px auto 0;
  padding-bottom: 160px;
}
.newsItem {
  width: 1200px;
  height: 260px;
  box-sizing: border-box;
  padding: 45px 65px 45px 42px;
  background: rgba(255, 255, 255, 1);
  margin-bottom: 20px;
}
/* 日期 */
.dateInfo {
  float: left;
  width: 128px;
  height: 128px;
  background: #f2f6fa;
  border-radius: 6px;
  text-align: center;
  padding: 26px 0;
  box-sizing: border-box;
  margin-right: 52px;
  .date {
    font-size: 50px;
    font-familyA: Roboto-Medium;
    font-weight: 500;
    color: rgba(98, 103, 136, 1);
    line-height: 58px;
  }
  .month {
    font-size: 16px;
    font-familyA: Roboto-Regular;
    font-weight: 400;
    color: rgba(98, 103, 136, 1);
    line-height: 19px;
  }
}
/* 图片 */
.newsImg {
  float: right;
  width: 280px;
  height: 170px;
  margin-left: 50px;
}
/* 内容 */
.newsDetails {
  overflow: hidden;
  .newsTitle {
    font-size: 22px;
    font-familyA: PingFangSC-Medium;
    font-weight: 500;
    color: rgba(51, 56, 94, 1);
    line-height: 30px;
    margin-bottom: 16px;
  }
  .newsDesc {
    font-size: 16px;
    font-familyA: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(51, 56, 94, 1);
    line-height: 28px;
    margin-bottom: 16px;
  }
  .btnDetail {
    width: 130px;
  }
}
</style>
<script>
import commonMixins from "@/mixins";
import { api } from "@/api/api";
import OtherHeader from "@/components/otherHeader";
import Footer from "@/components/footer";

export default {
  mixins: [commonMixins],
  components: {
    OtherHeader,
    Footer
  },
  data() {
    return {
      items: []
    };
  },
  async created() {
    this.getNewsList();
  },
  methods: {
    async getNewsList() {
      let params = {
        lang: "zh_CN",
        pageNum: 1,
        pageSize: 15,
        typeCode: "news"
      };
      let res = await api.announcementList(params);
      let { code, data, msg } = res.data;

      if (code == 0) {
        let { records: newList } = data;

        this.items = newList.map(item => ({
          id: item.id,
          date: item.createTime && item.createTime.substr(8,2),
          month: item.createTime && item.createTime.substr(0,7),
          src: item.pictureUrl,
          title: item.title,
          details: item.introduction
        }));
      } else {
        this.$layer.msg(msg);
      }
    },
    detailsMessage(newsId) {
      this.$router.push(`/newsDetail/${newsId}`);
    }
  }
};
</script>
